<template>
      <div class="search-container">
            <el-form class="form"
                  ref="form"
                  :model="form"
                  :rules="rules"
                  :label-width="labelWidth"
                  @keyup.enter.native="onSearch">
                  <!-- drawer有打开时自动选择第一个元素为焦点的bug -->
                  <el-form-item style="height:0;overflow:hidden">
                        <el-input></el-input>
                  </el-form-item>
                  <el-form-item v-for="(item,index) in filters"
                        :prop="item.prop"
                        :key="index"
                        :label="item.label"
                        :required="item.required"
                        :labelWidth="item.labelWidth||''">

                        <template v-if="!item.type||item.type==='text'">
                              <el-input v-model="form[item.prop]"
                                    :size="item.size||'small'"
                                    clearable
                                    :placeholder="item.placeholder"></el-input>
                        </template>

                        <template v-else-if="item.type==='number'">
                              <el-input v-model.number="form[item.prop]"
                                    :size="item.size||'small'"
                                    clearable
                                    :placeholder="item.placeholder"></el-input>
                        </template>

                        <template v-else-if="item.type==='switch'">
                              <el-switch v-model="form[item.prop]"></el-switch>
                        </template>

                        <template v-else-if="item.type==='select'">
                              <el-select class="full-width"
                                    v-model="form[item.prop]"
                                    :size="item.size||'small'"
                                    :placeholder="item.placeholder"
                                    filterable
                                    clearable>
                                    <el-option v-for="(option,index) in item.options"
                                          :key="index"
                                          :label="option.label||option.text"
                                          :value="option.value"></el-option>
                              </el-select>
                        </template>

                        <template v-else-if="item.type==='date'">
                              <el-date-picker v-model="form[item.prop]"
                                    :size="item.size||'small'"
                                    :type="item.type"
                                    :placeholder="item.placeholder"
                                    value-format="yyyy-MM-dd">
                              </el-date-picker>
                        </template>

                        <template v-else-if="item.type==='datetime'">
                              <el-date-picker v-model="form[item.prop]"
                                    :size="item.size||'small'"
                                    :type="item.type"
                                    :placeholder="item.placeholder"
                                    value-format="yyyy-MM-dd hh:mm:ss">
                              </el-date-picker>
                        </template>

                        <template v-else-if="item.type==='range'">
                              <el-input v-model="form[item.prop]"
                                    :size="item.size||'mini'"
                                    clearable
                                    style="width:45%"
                                    :placeholder="item.placeholder"></el-input>
                              --
                              <el-input v-model="form[item.prop2]"
                                    :size="item.size||'mini'"
                                    clearable
                                    style="width:45%"
                                    :placeholder="item.placeholder"></el-input>
                        </template>
                  </el-form-item>
            </el-form>

            <div class="footer">
                  <el-button @click="onReset">重置</el-button>

                  <el-button @click="onSearch"
                        type="primary">
                        确认
                  </el-button>
            </div>
      </div>

</template>

<script>
export default {
      props: {
            labelWidth: {
                  type: String,
                  default: '100px'
            },
            filters: {
                  type: Array,
                  default: () => []
            }
      },
      computed: {},
      data() {
            return {
                  form: {},
                  rules: {}
            }
      },
      created() {
            let propForm = Object.fromEntries(
                  this.filters.map(item => [item.prop, this.getValue(item.type, item.value)])
            )

            let prop2Form = Object.fromEntries(
                  this.filters
                        .map(item => [item.prop2, this.getValue(item.type, item.value)])
                        .filter(item => typeof item[0] != 'undefined')
            )

            this.form = Object.assign({}, propForm, prop2Form)

            this.rules = Object.fromEntries(
                  this.filters
                        .filter(item => item.rules && item.rules.length > 0)
                        .map(item => [
                              item.prop,
                              item.rules.map(rule => {
                                    const validator = rule.validator

                                    if (typeof validator === 'function') {
                                          rule.validator = (_rule, value, callback) => {
                                                validator({ ...this.form }, _rule, value, callback)
                                          }
                                    }

                                    return rule
                              })
                        ])
            )

            this.filters
                  .filter(item => item.watch)
                  .forEach(item => {
                        this.$watch(
                              'form.' + item.prop,
                              (value, odValue) => {
                                    item.watch.callback(this.form, this.filters, value, odValue)
                              },
                              item.watch.options
                        )
                  })
      },
      methods: {
            onSearch() {
                  this.$refs.form.validate(valid => {
                        if (valid) {
                              this.$emit('onSearch', { ...this.form })
                        } else {
                              return false
                        }
                  })
            },
            onReset() {
                  Object.keys(this.form).forEach(key => (this.form[key] = ''))
            },
            getValue(type, value) {
                  return type === 'switch' ? !!value : value
            },
            initForm(data) {
                  this.filters.forEach(filter => {
                        this.form[filter.prop] = this.getValue(filter.type, data[filter.prop])
                  })

                  this.$refs.form.validate()
            }
      }
}
</script>

<style scoped>
@import '~@assets/style/common/search.css';
</style>